<h2 *ngIf="entitySvc.queryPrefix==='type:FRONTEND'" class="flex-row-space-between" style="margin-bottom: 0px;">
    {{'MALL_CENTER' |translate}} /
    {{'CATEGORY_DASHBOARD'|translate}} <button mat-fab color="primary"
        (click)="openBottomSheet()">{{'ADD'|translate}}</button></h2>
<h2 *ngIf="entitySvc.queryPrefix==='type:BACKEND'" class="flex-row-space-between" style="margin-bottom: 0px;">
    {{'MALL_CENTER' |translate}} /
    {{'CATEGORY_ADMIN_DASHBOARD'|translate}} <button mat-fab color="primary"
        (click)="openBottomSheet()">{{'ADD'|translate}}</button></h2>
<lib-factory [formId]="formId2" [formInfo]="formInfo"></lib-factory>
<ng-container *ngIf="viewType==='LIST_VIEW'">
    <app-search (search)="doSearch($event)" [searchConfigs]="searchConfigs">
    </app-search>
    <div style="display: flex;flex-direction: row;align-items: center;height: 56px; justify-content: space-between;">
        <section>
            <mat-slide-toggle #batchUpdate class="example-margin" [color]="'accent'" [checked]="'false'"
                style="margin-right: 16px;" (click)="showOptions()">
                {{'BATCH_OPERATION'|translate}}
            </mat-slide-toggle>
            <ng-container *ngIf="batchUpdate.checked">
                <button mat-raised-button color="primary" (click)="doBatchDelete()">{{'BATCH_DELETE'|translate}}</button>
            </ng-container>
        </section>
        <app-table-column-config [formId]="formId" [columns]="getColumnLabelValue()" ></app-table-column-config>
    </div>

    <div class="mat-elevation-z8">
        <div class="table-container">
            <table mat-table [dataSource]="dataSource" matSort (matSortChange)="updateTable($event)">
                <!-- Checkbox Column -->
                <ng-container matColumnDef="select">
                    <th mat-header-cell *matHeaderCellDef>
                        <mat-checkbox (change)="$event ? masterToggle() : null"
                            [checked]="selection.hasValue() && isAllSelected()"
                            [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
                        </mat-checkbox>
                    </th>
                    <td mat-cell *matCellDef="let row">
                        <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                            [aria-label]="checkboxLabel(row)">
                        </mat-checkbox>
                    </td>
                </ng-container>
                <ng-container matColumnDef="id" sticky>
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnList['id'] |translate}}</th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.id"></app-copy-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnList['name'] |translate}}</th>
                    <td mat-cell *matCellDef="let row">
                        <app-editable-field [inputValue]="row.name" (newValue)="doPatch(row.id,$event,'name')">
                        </app-editable-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="parentId">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['parentId'] |translate}}</th>
                    <td mat-cell *matCellDef="let row">
                        <app-editable-page-select-single
                        [inputValue]="getOption(row.parentId,catalogList)" [list]="catalogList" [entitySvc]="entitySvc"
                        (newValue)="doPatch(row.id,$event,'parentId')">
                        </app-editable-page-select-single>
                    </td>
                </ng-container>

                <ng-container matColumnDef="edit">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['edit']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon">
                        <mat-icon (click)="openBottomSheet(row.id)" [color]="'primary'">edit</mat-icon>
                    </td>
                </ng-container>
                <ng-container matColumnDef="delete">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['delete']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon">
                        <mat-icon (click)="doDeleteById(row.id)" [color]="'warn'">delete_outline</mat-icon>
                    </td>
                </ng-container>
                <ng-container matColumnDef="review">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['review']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon" style="padding-right: 14px !important; ">
                        <ng-container *ngIf="row.reviewRequired">
                            <mat-icon [color]="'accent'">warning_amber</mat-icon>
                        </ng-container>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns();"></tr>
            </table>
        </div>
        <mat-paginator [showFirstLastButtons]="true" [length]="totoalItemCount" [pageIndex]="entitySvc.pageNumber"
            [pageSize]="pageSize" (page)="pageHandler($event)">
        </mat-paginator>
    </div>
</ng-container>
<div *ngIf="viewType==='TREE_VIEW'">
    <app-catalog-tree [catalogs]="dataSource.data" (leafNodeClicked)="openBottomSheet($event.id)"
        (nonLeafNodeClicked)="openBottomSheet($event.id)"></app-catalog-tree>
</div>
<div *ngIf="viewType==='DYNAMIC_TREE_VIEW'">
    <app-dynamic-catalog-tree></app-dynamic-catalog-tree>
</div>